<template>
	<!-- 商品\订单统计 -->
	<CardComponent :logoColor="data.color" :showImage="true">
		<template #header>
			<view class="">
				{{ data.title }}
			</view>
		</template>
		<template #default>
			<view class="product">
				<view class="gray-text product-value">
					{{ data.label1 }}
				</view>
				<view class="numStyle product-num">
					{{ utils.moneyFormatter(data.number1) }} <text class="product-unit">{{data.unit}}</text>
				</view>
				<view class="product-row">
					<view class="product-row-item">
						<view class="gray-text">
							{{ data.label2 }}
						</view>
						<view class="numStyle product-item-num">
							{{ data.number2 }}
						</view>
						<view class="gray-text">
							{{ data.unit1 }}
						</view>
					</view>
					<view class="product-row-item" v-if="data.label3">
						<view class="gray-text">
							{{ data.label3 }}
						</view>
						<view class="numStyle product-item-num">
							{{ data.number3 }}
						</view>
						<view class="gray-text">
							{{ data.unit2 }}
						</view>
					</view>
				</view>
				<view class="product-row product-lastrow">
					<view class="product-row-item" v-if="data.label4">
						<view class="gray-text">
							{{ data.label4 }}
						</view>
						<view class="numStyle product-item-num">
							{{ data.number4 }}
						</view>
						<view class="gray-text">
							{{ data.unit3 }}
						</view>
					</view>
					<view class="product-row-item" v-if="data.label5">
						<view class="gray-text">
							{{ data.label5 }}
						</view>
						<view class="numStyle product-item-num">
							{{ data.number5 }}
						</view>
						<view class="gray-text">
							{{ data.unit4 }}
						</view>
					</view>
				</view>
			</view>
		</template>
	</CardComponent>
</template>

<script setup>
import CardComponent from '@/components/card/normal';
import utils from '@/components/firstui/fui-utils'

const props = defineProps({
	data: {
		type: Object,
		required: false
	}
});
</script>

<style lang="scss" scoped>
.numStyle {
	color: var(--fui-color-primary);
	font-weight: bold;
}

.gray-text {
	font-size: 24rpx;
	font-weight: 400;
	color: #666666;
}

.product {
	width: calc(100% - 44rpx);
	margin: 0 auto;
	font-size: 24rpx;

	&-value {
		margin: 16rpx 0 8rpx;
	}

	&-num {
		font-size: 48rpx;
	}

	&-row {
		display: flex;
		margin-top: 26rpx;

		&-item {
			display: flex;
			width: 50%;
		}
	}

	&-lastrow {
		margin-top: 22rpx;
	}

	&-item-num {
		margin: 0 4rpx 0 12rpx;
	}
  .product-unit{
    margin-left: 8rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #666;
  }
}
</style>
